<template>
  <div>
    <van-tabbar v-model="active" route active-color="#f78166" inactive-color="#7d7e80" style="position: fixed; top: 0; left: 0; right: 0;">
      <!-- <van-tabbar-item to="/me" class="tab-item">登录</van-tabbar-item> -->
      <van-tabbar-item to="/" class="tab-item">首页</van-tabbar-item>
      <van-tabbar-item to="/found" class="tab-item">商品交易</van-tabbar-item>
      <van-tabbar-item to="/game" class="tab-item">租号玩</van-tabbar-item>
      <van-tabbar-item to="/material" class="tab-item">材料交易</van-tabbar-item>
      <van-tabbar-item to="/money" class="tab-item">金币交易</van-tabbar-item>
      <van-tabbar-item to="/computer" class="tab-item">二手电脑</van-tabbar-item>
      <van-tabbar-item to="/home" class="tab-item">个人中心</van-tabbar-item>
    </van-tabbar>
    <div style="margin-top: 50px;"> <!-- 根据van-tabbar的高度调整内容的顶部边距 -->
      <!-- 这里是你的其他内容 -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
</script>

<style scoped>
.tab-item {
  width: 50px;
  height:  100px;
  font-size: 50px; /* 设置未选中状态的字体大小 */
  background-color: black; /* 设置背景颜色 */
  border: none; /* 去除默认边框 */
  color: white; /* 设置字体颜色 */
}

/* 选中状态的字体大小保持一致 */
.van-tabbar__item--active {
  font-size: 50px; /* 设置选中状态的字体大小 */
}

/* 额外补充，去掉van-tabbar的底部边框 */
.van-tabbar {
  border: none; /* 去掉所有边框 */
  box-shadow: none; /* 去掉阴影 */
  background-color: #fff; /* 确保有背景色 */
}
</style>
